<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )
batchList(v-model="batchListShow" :batchNumber="batchNumber" :state="states" @message-to-parent="request('tableData')")
  </template>

<script setup lang="ts">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type TableProps,
  Icon,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { type QueryPagination, useApi } from "@scmt/core-api";
import type { ProcessBatchQueryParams } from "@scmt/api-lis-process-batch";
import batchList from "./batchList.vue";

const $api = useApi();
const queryPramas = reactive<ProcessBatchQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});
const batchNumber = ref("");
const states = ref(null);
const batchListShow = ref(false);

const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.lis.processBatch.query(params);
  },
  listDoctorAsOptions: (val: string) =>
    $api.user.listDoctorAsOptions({ officeId: val }),
});

onMounted(() => {
  request("tableData");
  request("listDoctorAsOptions");
});

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "batchNumber",
      label: "批次号",
    },
    {
      prop: "numberPeople",
      label: "批次人数",
    },
    {
      prop: "state",
      label: "批次状态",
      as: "select",
      options: {
        loadMethod: () => {
          return [
            {
              label: "未处理",
              value: 1,
            },
            {
              label: "已处理",
              value: 2,
            },
          ];
        },
      },
    },
    {
      prop: "handlingMethod",
      label: "处理方式",
    },
  ];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
    alignAction: "left",
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    columns: [
      {
        prop: "batchNumber",
        label: "批次号",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "generationTime",
        label: "批次号生成时间",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "numberPeople",
        label: "批次人数",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "state",
        label: "批次状态",
        tooltip: true,
        minWidth: "120px",
        render: ({ row }) => {
          let iconName = "";
          let content = "";
          let color = "";
          switch (row.state) {
            case 1: {
              iconName = "InfoFilled";
              content = "未处理";
              break;
            }
            case 2: {
              iconName = "CircleCheckFilled";
              content = "已处理";
              break;
            }
          }
          return h(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
              },
            },
            [
              h(Icon, {
                name: iconName,
                style: {
                  color: color,
                },
              }),
              h(
                "span",
                {
                  style: {
                    marginLeft: "var(--mt-margin-small)",
                  },
                },
                content
              ),
            ]
          );
        },
      },
      {
        prop: "createTime",
        label: "创建时间",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "handlingMethod",
        label: "处理方式",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "processTime",
        label: "处理时间",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "processId",
        label: "处理人",
        tooltip: true,
        minWidth: "120px",
        render: ({ row }) => {
          const patientType = data.listDoctorAsOptions ?? [];
          let resText = row.processId;
          if (patientType && patientType.length > 0) {
            let filter = patientType.filter(
              (item) => item.value == row.processId
            );
            if (filter && filter.length > 0) {
              resText = filter[0].label;
            }
          }
          return h("div", resText);
        },
      },
      {
        label: "操作",
        fixed: "right",
        width: "150px",
        actions: ({ row }) => {
          return [
            {
              label: "批量处理",
              event: "cancel",
              type: "success",
              visible: row.state == 1,
            },
            {
              label: "查看",
              event: "view",
              type: "danger",
              visible: row.state == 2,
            },
          ].filter((i) => i.visible === void 0 || i.visible);
        },
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
  };
  return tableProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "cancel":
      batchListShow.value = true;
      batchNumber.value = model.batchNumber;
      if (model.state == 1) {
        states.value = 5;
      }
      break;
    case "view":
      batchListShow.value = true;
      batchNumber.value = model.batchNumber;
      if (model.state == 1) {
        states.value = 6;
      }
      break;
  }
};
</script>

<style lang="less" scoped></style>
